<template>
  <div class="test-container">
    <h2>API测试页面</h2>
    
    <el-card class="test-card">
      <h3>数据库连接测试</h3>
      <el-button @click="testDatabase" :loading="loading">测试数据库连接</el-button>
      <div v-if="testResult" class="result">
        <p>{{ testResult }}</p>
      </div>
    </el-card>
    
    <el-card class="test-card">
      <h3>数据库检查</h3>
      <el-button @click="checkDuplicates" :loading="loading">检查重复用户</el-button>
      <div v-if="checkResult" class="result">
        <p>{{ checkResult }}</p>
      </div>
    </el-card>
    
    <el-card class="test-card">
      <h3>注册测试</h3>
      <el-form :model="testForm" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="testForm.username" placeholder="测试用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="testForm.password" type="password" placeholder="测试密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="testRegister" :loading="loading">测试注册</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <el-card class="test-card">
      <h3>登录测试</h3>
      <el-form :model="testForm" label-width="80px">
        <el-form-item>
          <el-button @click="testLogin" :loading="loading">测试登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import API from '@/api/index.js'

export default {
  setup() {
    const loading = ref(false)
    const testResult = ref('')
    const checkResult = ref('')
    const testForm = ref({
      username: 'testuser',
      password: 'testpass'
    })
    
    const testDatabase = async () => {
      loading.value = true
      try {
        const response = await API.get('/user/test')
        testResult.value = response.data.msg
        ElMessage.success('数据库连接测试成功')
      } catch (error) {
        console.error('数据库测试失败:', error)
        testResult.value = '数据库连接失败: ' + (error.response?.data?.msg || error.message)
        ElMessage.error('数据库连接测试失败')
      } finally {
        loading.value = false
      }
    }
    
    const checkDuplicates = async () => {
      loading.value = true
      try {
        const response = await API.get('/user/check-duplicates')
        checkResult.value = response.data.msg
        ElMessage.success('检查完成')
      } catch (error) {
        console.error('检查失败:', error)
        checkResult.value = '检查失败: ' + (error.response?.data?.msg || error.message)
        ElMessage.error('检查失败')
      } finally {
        loading.value = false
      }
    }
    
    const testRegister = async () => {
      loading.value = true
      try {
        const response = await API.post('/user/register', {
          username: testForm.value.username,
          password: testForm.value.password
        })
        ElMessage.success('注册测试成功: ' + response.data.msg)
      } catch (error) {
        console.error('注册测试失败:', error)
        ElMessage.error('注册测试失败: ' + (error.response?.data?.msg || error.message))
      } finally {
        loading.value = false
      }
    }
    
    const testLogin = async () => {
      loading.value = true
      try {
        const response = await API.post('/user/login', {
          username: testForm.value.username,
          password: testForm.value.password
        })
        ElMessage.success('登录测试成功')
        console.log('登录返回数据:', response.data)
      } catch (error) {
        console.error('登录测试失败:', error)
        ElMessage.error('登录测试失败: ' + (error.response?.data?.msg || error.message))
      } finally {
        loading.value = false
      }
    }
    
    return {
      loading,
      testResult,
      checkResult,
      testForm,
      testDatabase,
      checkDuplicates,
      testRegister,
      testLogin
    }
  }
}
</script>

<style scoped>
.test-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.test-card {
  margin-bottom: 20px;
}

.result {
  margin-top: 10px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 4px;
}
</style> 